<script setup>
import { onMounted, ref } from 'vue'

let banner
// 一些符号
// ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❤ ❀
const w = ref('❄')

onMounted(() => {
  banner = document.getElementById('banner')
  setInterval(stars, 500)
})

function stars() {
  const e = document.createElement('div')
  // 设置自定义属性
  e.setAttribute('data-content', w.value)
  e.setAttribute('class', 'star')
  e.style.left = Math.random() * window.innerWidth + 'px'
  const size = Math.random() * 18
  e.style.fontSize = 12 + size + 'px'
  const duration = Math.random() * 3
  e.style.animationDuration = 6 + duration + 's'
  banner.appendChild(e)

  setTimeout(() => {
    banner.removeChild(e)
  }, 9000)
}

</script>

<template>
  <div class="top-banner">
    <div class="banner-bg"></div>
    <RouterLink to="/">
      <div class="masthead" id="banner">
        <div class="site-emboss">{{  }}</div>
        <div class="site-title">{{ $t('banner.embossRight') }}</div>
      </div>
    </RouterLink>
  </div>
</template>

<style>
.star {
  position: absolute;
  top: -20px;
  color: #efd7d9;
  animation: snowflake-animate 5s linear forwards;
  z-index: 999;
}

.star::before {
  content: attr(data-content);
  text-shadow:
    0 0 5px #ffffff,
    0 0 20px #fff,
    0 0 50px #fff;
}

@keyframes snowflake-animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translateY(40vh) rotate(360deg) translateX(10vh);
    opacity: 0;
  }
}
</style>

<style scoped lang="scss">
.top-banner {
  position: relative;
  z-index: 200;
  overflow: hidden;
  border-bottom: 2px solid var(--site-banner-border);
}

.masthead {
  display: flex;
  justify-content: space-between;
  height: 80px;
  background-color: var(--site-banner-bgc);
  /* background-image: var(--site-banner-linear); */
  background-image: var(--site-banner-linear);
  background-repeat: no-repeat;
  background-size: auto 180%, contain;
  background-position: 95% 30%;

}

.site-emboss {
  margin: auto 20px;
  font-size: 3.000rem;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--site-banner-emboss-l);
  --c: lightseagreen;
  text-shadow: 0 0 14px var(--c);
  animation: text-ani 60s linear infinite;
}

@keyframes text-ani {
  to {
    /* 色相旋转滤镜（设置度数可改变颜色） */
    filter: hue-rotate(360deg);
  }
}


.site-title {
  text-align: center;
  align-self: center;
  font-family: "Consolas", serif;
  text-transform: uppercase;
  margin-right: .25em;
  font-size: 3.500rem;
  white-space: nowrap;
  color: var(--site-banner-emboss-r);
}
</style>
